<template>
  <view class="container">
    <hello-title></hello-title>
    <view style="height: 24px"></view>
    <view class="page-title page-title--no-padding">血压</view>
    <view class="page-title page-title--no-padding page-title--sub">{{
      date
    }}</view>
    <view class="data-card-area">
      <view class="data-card data-card--red">
        <view class="data-card__head">
          <text>收缩压</text>
          <view class="data-card__icon data-card__icon--heart"></view>
        </view>
        <view class="data-card__content">
          <text>{{ highRate }}</text>
          <text class="unit">mmHG</text>
        </view>
      </view>
      <view style="width:30px"></view>
      <view class="data-card data-card--red">
        <view class="data-card__head">
          <text>舒张压</text>
          <view class="data-card__icon data-card__icon--heart"></view>
        </view>
        <view class="data-card__content">
          <text>{{ lowRate }}</text>
          <text class="unit">mmHG</text>
        </view>
      </view>
    </view>
    <view v-if="waringText" class="waring">{{ waringText }}</view>
    <view class="line-card">
      <view class="line-card__hints">
        <view class="line-card__hint line-card__hint--red">收缩压</view>
        <view class="line-card__hint line-card__hint--purple">舒张压</view>
      </view>
      <view class="line-card__tabs">
        <view
          class="line-card__tab"
          @tap="showWeekChart"
          :class="{ 'line-card__tab--active-red': chartDateType === 1 }"
        >
          每周
        </view>
        <view
          class="line-card__tab"
          @tap="showMonthChart"
          :class="{ 'line-card__tab--active-red': chartDateType === 2 }"
        >
          每月
        </view>
      </view>
      <view
        class="line-card__content"
        :class="{
          'line-card__content--hidden':
            chartDateType !== 1 || isCreateActionSheetOpen
        }"
      >
        <LineChart2Lines
          id="heart-fast-week"
          v-if="weekChartData"
          :config="weekChartData"
        ></LineChart2Lines>
      </view>
      <view
        class="line-card__content"
        :class="{
          'line-card__content--hidden':
            chartDateType !== 2 || isCreateActionSheetOpen
        }"
      >
        <LineChart2Lines
          id="heart-fast-month"
          v-if="monthChartData"
          :config="monthChartData"
        ></LineChart2Lines>
      </view>
    </view>
    <view class="height-spacer"></view>
    <!--    添加按钮-->
    <view class="margin-v--normal fix-bottom">
      <button class="button--block button--purple" @tap="showCreateActionSheet">
        添加数据
      </button>
    </view>
    <!--    底部操作栏-->
    <AtModal
      :isOpened="isCreateActionSheetOpen"
      :onClose="closeCreateActionSheet"
      v-if="isCreateActionSheetOpen"
    >
      <AtModalContent>
        <view class="input-row">
          <view class="input-row__label">收缩压</view>
          <view class="input-row__content"
            ><input v-model="gaoyaInputValue" type="digit" placeholder="mmHG"
          /></view>
        </view>
        <view class="input-row">
          <view class="input-row__label">舒张压</view>
          <view class="input-row__content"
            ><input v-model="diyaInputValue" type="digit" placeholder="mmHG"
          /></view>
        </view>
      </AtModalContent>
      <AtModalAction>
        <button @tap="addData" class="custom-button">提交</button>
      </AtModalAction>
    </AtModal>
  </view>
</template>

<script>
import "./index.less";
import helloTitle from "../../../common-components/hello-title/hello-title";
import LineChart2Lines from "../../../common-components/line-chart-2-lines/line-chart-2-lines";
import { getHistoryData } from "../../../services/healthy-data-service";
import findIndex from "lodash.findindex";
import get from "lodash.get";
import {
  AtInput,
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction
} from "taro-ui-vue";

const {
  updateBloodPressure
} = require("../../../services/healthy-data-service");

export default {
  name: "index",
  components: {
    helloTitle,
    LineChart2Lines,
    AtModal,
    AtModalContent,
    AtModalAction
  },
  data() {
    return {
      chartDateType: 1,
      weekChartData: null,
      monthChartData: null,
      highRate: 0,
      restRate: 0,
      lowRate: 0,
      rate: 0,
      date: 0,
      isCreateActionSheetOpen: false,
      gaoyaInputValue: null,
      diyaInputValue: null
    };
  },
  computed: {
    waringText() {
      if (this.highRate < 90 || this.lowRate < 60) {
        return "警告：您的血压偏低，如有不适请及时就诊";
      }
      if (this.highRate > 140 || this.lowRate > 90) {
        return "警告：您的血压偏高，建议休息半小时后再测一次";
      }
      return "";
    }
  },
  methods: {
    showCreateActionSheet() {
      this.isCreateActionSheetOpen = true;
    },
    closeCreateActionSheet() {
      this.isCreateActionSheetOpen = false;
    },
    handleTypeChange(e) {
      this.renalInputType = this.selectebleList[parseInt(e.detail.value)];
    },
    handleValueChange(e) {
      console.log(e);
    },
    showWeekChart() {
      this.chartDateType = 1;
    },
    showMonthChart() {
      this.chartDateType = 2;
    },
    // 把数据格式化成 ${daysNumber} 天的数据
    formatChartData(data, daysNumber: number) {
      const baseConfig = {
        yAxis: {
          unit: 1,
          base: 50,
          top: 200,
          display: [
            // 必须按顺序
            { value: 50, label: "50" },
            { value: 90, label: "90" },
            { value: 180, label: "180" },
            { value: 200, label: "200" }
          ]
        },
        dataset: [],
        dataset2: []
      };
      for (let i = 1; i <= daysNumber; i++) {
        const index = findIndex(data, item => item.dayOfWeek === i);
        let dataSetValueArray = get(data[index], "value", []);
        if (!dataSetValueArray) {
          dataSetValueArray = [];
        } else {
          dataSetValueArray.reverse();
        }
        const value = get(dataSetValueArray, `[0].systolicPressure`, 0);
        const value2 = get(dataSetValueArray, `[0].diastolicPressure`, 0);
        console.log(value, value2);
        baseConfig.dataset.push({ value: value });
        baseConfig.dataset2.push({ value: value2 });
      }
      return baseConfig;
    },
    async addData() {
      const result = await updateBloodPressure({
        systolicPressure: this.gaoyaInputValue,
        diastolicPressure: this.diyaInputValue,
        measurementDate: Date.now()
      });
      await this.initData();
    },
    async initData() {
      this.isCreateActionSheetOpen = false;
      const weekResult = await getHistoryData("DAY_OF_WEEK", "BLOOD_PRESSURE");
      const monthResult = await getHistoryData("DAY_OF_WEEK", "BLOOD_PRESSURE");
      console.log("--血压数据--");
      console.log(weekResult);
      this.lowRate = get(
        weekResult[weekResult.length - 1],
        `value[${weekResult[weekResult.length - 1].value.length -
          1}].diastolicPressure`,
        0
      );
      this.highRate = get(
        weekResult[weekResult.length - 1],
        `value[${weekResult[weekResult.length - 1].value.length -
          1}].systolicPressure`,
        0
      );
      this.date = get(weekResult[weekResult.length - 1], `regDay`, 0);
      this.weekChartData = this.formatChartData(weekResult, 7);
      this.monthChartData = this.formatChartData(monthResult, 30);
    }
  },
  async created() {
    await this.initData();
  }
};
</script>
